<template>
  <div class="content">
    <!-- 商品信息界面 -->
    <div class="goodsdesc" v-for="(item, index) in goodslist" :key="index">
      <div class="inputcontent">
        <!-- <el-checkbox v-model="$store.getters.getgoodsselected[item.id]" 
            @change="selectedchange(item.id,$store.getters.getgoodsselected[item.id])"
        ></el-checkbox> -->
        <el-switch v-model="$store.getters.getgoodsselected[item.id]" 
         @change="selectedchange(item.id,$store.getters.getgoodsselected[item.id])"></el-switch>
      </div>

      <img class="img" :src="item.thumb_path">
      <div class="goodsname">
        <p>{{item.title}}</p>
        <div class="goodstitle">
          <span class="span1">￥{{item.sell_price}}</span>
          <span class="span2">
            <el-input-number
              v-model="num[item.id]"
              @change="handleChange(item.id)"
              :min="1"
              :max="1000"
              label="描述文字" size="mini"
            ></el-input-number>
            <!-- <input type="button" value="-" class="bottom" @click="subtractnum">
            <input type="text" :value="num[item.id]" class="inputtext">
            <input type="button" value="+" class="bottom" @click="addnum">-->
          </span>
          <a href="javascript:;" @click.prevent="remove(item.id, index)">删除</a>
        </div>
      </div>
    </div>

    <!-- 商品结算界面 -->
    <div class="count">
      <div class="left">
        <p>总计（不含运费）</p>
        <p>已勾选商品{{$store.getters.getgoodscountandamount.count}}件，总价：￥{{$store.getters.getgoodscountandamount.amount}}</p>
      </div>
      <div class="right">
        <input type="button" value="去结算">
      </div>
    </div>

    <!-- <p>{{$store.getters.getgoodsselected}}</p> -->
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: this.$store.getters.getgoodscount,
      //   { "87": 1, "88": 11, "91": 2, "92": 3 }
      // goodslist;{"cou":1,"id":88,"title":"苹果Apple iPhone 6 Plus 16G 4G手机（联通三网版）",
      // "sell_price":5780,"thumb_path":"http://demo.dtcms.net/upload/201504/20/thumb_201504200059017695.jpg"}
      goodslist: [],
      
      
    };
  },
  created() {
    this.getshopcar();
  },
  methods: {
    //   复选框的改变
      selectedchange(id,val){
          console.log(id,val);
          this.$store.commit('updategoodsselected',{id:id,selected:val})
      },
    //   实现删除功能
    remove(id, index) {
      // 删除goodslist中的数据,通过下标来删
      this.goodslist.splice(index, 1);
      // 删除stroe中的数据，在vuex中定义一个方法
      this.$store.commit("removefromcar", id);
    },
    getgoodsselected(){
        this.$store.commit('getgoodsselected')
    },
    handleChange(value) {
      var u = { id: value, count: this.num[parseInt(value)] };
      console.log(u);
      this.$store.commit("updatedgoodsinfo", u);
    },

    getshopcar() {
      // 获取到stroe中的数据
      var idArr = [];
      this.$store.state.car.forEach(item => {
        idArr.push(item.id);
      });
      if (idArr.length <= 0) {
        return;
      }
      this.$http
        .get("api/goods/getshopcarlist/" + idArr.join(","))
        .then(result => {
          if (result.body.status === 0) {
            this.goodslist = result.body.message;
          }
        });
      //   console.log(idArr);
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
//   height: 700px;
  background-color: #ccc;
  padding: 5px 5px;
  .p{
      width: 100%;
      height: 100px;
  }
  .count {
    width: 100%;
    height: 100px;
    margin-top: 5px;
    background-color: rgb(233, 227, 227);
    display: flex;
    .left {
      flex: 7;
    }
    .right {
      flex: 3;
      input {
        width: 100px;
        height: 50px;
        background-color: rgb(226, 81, 13);
        color: #fff;
        outline: none;
      }
    }
  }
  .goodsdesc {
    width: 100%;
    height: 80px;
    background-color: #eee;
    display: flex;
    margin-bottom: 5px;
    .inputcontent {
      flex: 1;
      text-align: center;
      line-height: 80px;
      .input {
        width: 30px;
        height: 30px;
      }
    }
    .img {
      flex: 1;
      width: 50px;
    }
    .goodsname {
      flex: 3;
      p {
        width: 100%;
        height: 40px;
        margin: 0;
      }
      .goodstitle {
        display: flex;
        height: 40px;
        a {
          text-decoration: none;
        }
        .span1 {
          flex: 1;
        }
        .span2 {
          flex: 3;
          .bottom {
            width: 30px;
            height: 30px;
            background-color: lightcoral;
            color: #fff;
            outline: none;
          }
          .inputtext {
            width: 30px;
            height: 30px;
            outline: none;
          }
        }
        a {
          display: block;
          flex: 1;
        }
      }
    }
  }
}
</style>
